<template>
  <el-menu @select="handleSelect" class="index-menu" mode="horizontal" :default-active="activeIndex" background-color="#909399" text-color="#fff" active-text-color="#409EFF">
    <div class="logo">
      <img :src="require('@/assets/logo.png')" />
    </div>
    <!-- <el-input class="select-input" placeholder="请输入内容" prefix-icon="el-icon-search" /> -->
    <el-menu-item v-for="(item, index) in menuList" :key="index" :index="item.index">
      {{ item.title }}
    </el-menu-item>

    <li v-if="noToken" class="sign-button el-menu-item">Sign In</li>
    <template v-else>
      <el-dropdown @command="handleCommand" size="medium" trigger="click">
        <li class="sign-button el-menu-item">{{ profile.name || "你是谁？" }}</li>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="profile">Your profile</el-dropdown-item>
          <el-dropdown-item divided command="signOut">Sign out</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </template>
  </el-menu>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
export default {
  props: {
    menuList: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      activeIndex: "0",
      // ⾸⻚、成果展示、排⾏榜、资源中⼼、创新盒⼦，⽤户登录
      // menuList: [
      //   // { index: "/apply", title: "加入我们" },
      //   { index: "/review", title: "审核申请" },
      //   { index: "/members", title: "成员" },
      //   { index: "/score", title: "积分" },
      //   { index: "/events", title: "事件" },
      //   { index: "/2", title: "签到" },
      //   { index: "/3", title: "创新盒⼦" }
      // ]
    };
  },
  methods: {
    ...mapActions([
      "signOut"
    ]),
    handleSelect(index) {
      console.log(index);
      this.$router.push(index);
    },
    handleCommand(command) {
      switch (command) {
      case "signOut":
        this[command]();
        break;
      case "profile":
        this.$router.push("/1601050807");
        break;

      default:
        break;
      }
    }
  },
  computed: {
    ...mapGetters([
      "noToken",
      "profile"
    ])
  }
};
</script>

<style lang="scss" scoped>
.index-menu {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 60px;
  .logo {
    img {
      width: 60px;
    }
  }
}
.index-menu .logo {
  flex-grow: 1;
  border: none;
  outline: none;
  color: #ffffff;
  padding-left: 20px;
}
.select-input {
  max-width: 256px;
  margin-right: 45px;
}
@media (orientation: portrait) {
  .select-input {
    display: none;
  }
}

.sign-button {
  box-sizing: border-box;
  height: 100%;
  padding: 0 20px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}
</style>

